<template>
  <div class="statistic-visual">
    <div class="statistic-visual__left" :class="bgColor">
      <slot></slot>
    </div>
    <div class="statistic-visual__right">
      <div class="statistic-visual__title">
        {{ title }}
      </div>
      <div class="statistic-visual__value">
        <span class="statistic-visual__number">{{ value }}</span>
        <span class="statistic-visual__unit">&nbsp;{{ unit }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'ArkStatisticVisual',
  props: {
    bgColor: {
      type: String
    },
    title: {
      type: String
    },
    value: {
      type: [Number, String]
    },
    unit: {
      type: String
    },
  }
});
</script>

<style scoped>
.statistic-visual {
  @apply flex gap-x-2 items-center;

  .statistic-visual__left {
    @apply text-3xl w-[50px] h-[50px] rounded-[18px];
    @apply flex justify-center items-center;
  }

  .statistic-visual__right {
    @apply flex-1;

    .statistic-visual__title {
      @apply text-sm text-[#3C3C4399] leading-[15px];
    }

    .statistic-visual__value {
      @apply text-2xl font-semibold;

      .statistic-visual__unit {
        @apply text-sm text-[#3C3C4399] leading-[15px];
      }
    }
  }
}
</style>